<template>
  <div class="footer">
    <button @click="del">清空数据</button>
    <div>
      <span>{{ index }}</span
      ><span>/</span><span>{{ arrLength }}</span>
    </div>
  </div>
</template>

<script>
/* 清空操作  
 操作就是将arr清空  点击按钮 arr数据清空

总条数的来源
数组arr长度  随着arr的变化而变化  计算属性



*/
export default {
  props: ["arrLength"],
  data() {
    return {
      index: 0,
    };
  },
  mounted() {
    this.$eventBus.$on("itemIndex", (index) => {
      /* console.log("在footer中打印的");
      console.log(index); */
      this.index = index;
    });
  },
  methods: {
    del() {
      console.log("打算清空arr数据");
      this.$eventBus.$emit("emptyArr");
    },
  },
  watch: {
    arrLength() {
      console.log("当arrlength一变化，就会触发");
      // 当arrlength为0 index 0
      // if(this.arrLength)
      // console.log(this.arrLength);
      if (this.arrLength == 0) {
        this.index = 0;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.footer {
  display: flex;
  justify-content: space-between;
}
</style>